<template>
  <div
    class="relative overflow-hidden"
    :class="{ 'rounded-2xl border p-2': round }"
  >
    <div class="relative overflow-hidden" :class="{ 'rounded-xl': round }">
      <img
        class="h-[420px] w-full object-cover"
        :src="post.cover"
        :alt="post.title"
      />
      <div v-if="tag" class="absolute right-4 top-4">
        <RouterLink
          :to="{ name: 'tag-details', params: { id: tag.id } }"
          class="inline-block rounded-full bg-primary px-3 py-1 font-sans text-xs capitalize text-white shadow-lg shadow-primary/20"
        >
          {{ tag.name }}
          <span class="sr-only">tag</span>
        </RouterLink>
      </div>
    </div>
    <div
      class="absolute bottom-0 left-0 z-10 h-1/2 w-full bg-gradient-to-t from-black to-transparent opacity-70"
    ></div>
    <div
      class="absolute bottom-0 left-0 z-20 flex h-1/2 w-full flex-col justify-end"
    >
      <div class="p-6">
        <div class="mb-1 mt-4 flex items-center gap-2 text-white">
          <span class="icon-[uil--calender]" />
          <p class="font-sans text-xs">{{ post.updatedAt }}</p>
        </div>
        <h3 class="mb-2 font-sans text-2xl sm:text-xl">
          <RouterLink
            :to="`/blog/${post.id}`"
            class="text-white drop-shadow-xl transition-colors duration-500 hover:text-primary hover:shadow-white hover:text-shadow-lg"
          >
            {{ post.title }}
          </RouterLink>
        </h3>
        <div class="flex items-center justify-between">
          <div class="group">
            <span class="flex items-center gap-2">
              <RouterLink
                :to="{ name: 'author-details', params: { id: post.authorId } }"
                class="h-9 w-9 shrink-0 rounded-full bg-white transition-colors duration-300 group-hover:bg-primary/60"
              >
                <img
                  :src="post.avatar ?? `/api/avatar/${post.nickname}.svg`"
                  :alt="post.nickname"
                  class="h-9 w-9 scale-90 rounded-full object-cover"
                />
              </RouterLink>
              <div>
                <h4 class="font-sans text-sm">
                  <RouterLink
                    :to="{
                      name: 'author-details',
                      params: { id: post.authorId },
                    }"
                    class="text-white transition-colors duration-300 group-hover:text-primary"
                  >
                    {{ post.nickname }}
                  </RouterLink>
                </h4>
              </div>
            </span>
          </div>
          <!-- <div v-if="reading" class="font-sans text-sm text-base-content">
            <span class="pr-2">—</span>
            <span>5 minutes read</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Post, User, Tag } from "@/stores/types";
import { RouterLink } from "vue-router";

// 简化的 Tag 类型
type TagSimplify = Pick<Tag, "id" | "name">;

interface Props {
  post: Post & User;
  round?: boolean;
  reading?: boolean;
  tag?: TagSimplify;
}
defineProps<Props>();
</script>
